﻿@using DCMS.Web.Extensions;
@using DCMS.Web.Framework.UI;
@using DCMS.ViewModel.Models.Report;

@model VisitReachedListModel

<section id="content_wrapper">
    <!-- Start: Topbar-Dropdown -->
    <div id="topbar-dropmenu">
        @await Html.PartialAsync("_ToolBox")
    </div>
    <!-- End: Topbar-Dropdown -->
    <!-- Start: Topbar -->
    <header id="topbar">
        <div class="topbar-left">
            <ol class="breadcrumb">
                <li class="crumb-active">
                    <a href="#">报表</a>
                </li>
                <li class="crumb-icon">
                    <a href="@Url.RouteUrl("HomePage")">
                        <span class="glyphicon glyphicon-home"></span>
                    </a>
                </li>
                <li class="crumb-link">
                    <a href="#">员工报表</a>
                </li>
                <li class="crumb-trail">拜访达成表</li>
            </ol>
        </div>
        <div class="topbar-right">
            <div class="ml15 ib va-m" id="toggle_sidemenu_r">
                <a href="#" class="pl5">
                    <i class="fa fa-sign-in fs22 text-primary"></i>
                    <span class="badge badge-hero badge-danger">3</span>
                </a>
            </div>
        </div>
    </header>
    <!-- End: Topbar -->
    <!-- Begin: Content -->
    <section id="content" class="formSection">

        <div class="special-alerts">
            <div class="alert alert-danger light alert-dismissable" id="alert-demo-2" style="display: none;">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <i class="fa fa-info pr10"></i>
                <strong>您没有被授权此操作!</strong>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <form asp-action="BusinessUserVisitReached" asp-controller="VisitStore" method="get" id="formSearch" novalidate="novalidate">
                    <div class="panel panel-default" id="panel0">
                        <div class="panel-heading">
                            <span class="glyphicon glyphicon-search"></span> 高级搜索
                            <a class="btn btn-default btn-sm pull-right m5 mrn p5 pbn" id="AdvancedSearch"><i class="fa fa-angle-double-right"></i></a>
                        </div>
                        <div class="panel-body p10">
                            <div class="row">
                                <div class="col-sm-2">
                                    <dcms-select asp-for="BusinessUserId" asp-items="@Model.BusinessUsers" asp-default="业务员" />
                                </div>
                                <div class="col-sm-2">
                                    <dcms-select asp-for="LineId" asp-items="@Model.Lines" asp-default="线路" />
                                </div>

                                <div class="col-sm-2">
                                    <dcms-editor asp-for="StartTime" placeholder="开始时间..." />
                                </div>
                                <div class="col-sm-2">
                                    <dcms-editor asp-for="EndTime" placeholder="结束时间..." />
                                </div>
                                <div class="col-sm-4">
                                    <button id="btn_query" type="submit" class="btn btn-primary btn-block">
                                        <span class="glyphicon glyphicon-search mr5" aria-hidden="true"></span>查询
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                @{
                    var pager = Html.Pager(Model.PagingFilteringContext).QueryParam("pagenumber");
                }

                @if (!pager.IsEmpty())
                {
                    <div class="fixed-table-pagination" style="display: block;">
                        @Html.Raw(pager.ToString())
                    </div>
                }

                <div class="panel">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <span class="glyphicon glyphicon-tasks"></span> 报表
                        </div>
                    </div>
                    <div class="panel-body p10">

                        <div id="toolbar" class="btn-group mb10">
                            <a href="@Url.Action("BusinessUserVisitReached")" class="btn btn-default btn-sm mr5">
                                <span class="glyphicon glyphicon-refresh mr5"></span>重置
                            </a>
                            <a class="btn btn-info btn-sm mr5" id="btn_export">
                                <span class="glyphicon glyphicon-export mr5" aria-hidden="true"></span>导出
                            </a>
                        </div>
                        <div class="row">
                            <div class="col-md-12 admin-grid">
                                <div class="panel sort-disable">
                                    <div class="panel-heading">
                                        <span class="panel-title">拜访量</span>
                                    </div>
                                    <div class="panel-body pn">
                                        <div id="high-line3" style="max-width:1450px;height: 400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <table class="table table-striped table-bordered table-hover">
                            <tr>
                                <th class="text-left">
                                    <div class="th-inner">业务员</div>
                                </th>
                                <th class="text-center">
                                    <div class="th-inner">日期</div>
                                </th>
                                <th class="text-left">
                                    <div class="th-inner">拜访线路</div>
                                </th>
                                <th class="text-right">
                                    <div class="th-inner">计划拜访</div>
                                </th>
                                <th class="text-right">
                                    <div class="th-inner">终端数</div>
                                </th>
                                <th class="text-right">
                                    <div class="th-inner">未拜访</div>
                                </th>
                                <th class="text-right">
                                    <div class="th-inner">实际拜访</div>
                                </th>
                                <th class="text-right">
                                    <div class="th-inner">成交店数</div>
                                </th>
                                @*<th class="text-right">
                                    <div class="th-inner">成交单数</div>
                                </th>
                                <th class="text-right">
                                    <div class="th-inner">拜访成功率</div>
                                </th>
                                <th class="text-right">
                                    <div class="th-inner">成交率</div>
                                </th>*@
                                <th class="text-right">
                                    <div class="th-inner">拜访时长</div>
                                </th>
                            </tr>

                            @{
                                if (Model.Items != null && Model.Items.Count > 0)
                                {
                                    @foreach (var item in Model.Items)
                                    {

                        <tr>
                            <td class="text-left">@item.BusinessUserName</td>
                            <td class="text-center">@item.SigninDateTime.ToString("yyyy-MM-dd")</td>
                            <td class="text-left">@item.LineName</td>
                            <td class="text-right">@item.PlanVisitCount</td>
                            <td class="text-right">@item.TerminalCount</td>
                            <td class="text-right">@item.UnVisitCount</td>
                            <td class="text-right">@item.ActualVisitCount</td>
                            <td class="text-right">@item.ReachedStoreCount</td>
                            @*<td class="text-right">@item.ReachedBillCount</td>
                            <td class="text-right">@item.VisitSuccessRate</td>
                            <td class="text-right">@item.CloseRate</td>*@
                            <td class="text-right" style="color:#ff0000;">@item.OnStoreStopSeconds</td>
                        </tr>
                                    }
                                }
                                else
                                {
                                    <tr class="no-records-found"><td class="text-center" colspan="10">没有找到匹配的记录</td></tr>
                                }
                            }
                        </table>

                        @{
                            pager = Html.Pager(Model.PagingFilteringContext).QueryParam("pagenumber");
                        }

                        @if (!pager.IsEmpty())
                        {
                            <div class="fixed-table-pagination" style="display: block;">
                                @Html.Raw(pager.ToString())
                            </div>
                        }
                    </div>
                    </div>

            </div>
        </div>
    </section>
    <!-- End: Content -->
</section>



@{
    await Html.RenderPartialAsync("_MapModal", new ViewDataDictionary(ViewData) { { "formId", "MapForm" } });
}


@section CurPageScripts
{
    <script type="text/javascript">
        jQuery(document).ready(function () {
            "use strict";

            // Init Theme Core
            Core.init();

            // Init Demo JS
            Demo.init();

            $("#BusinessUserId").change(function () {
                $("#LineId").empty();
                var businessUserId = $("#BusinessUserId").val();
                if (businessUserId > 0)
                {
                    $.ajax({
                        type: "get",
                        url: "/VisitStore/GetLineTierByUserId",
                        data: { userId: $("#BusinessUserId").val() },
                        dataType: "json",
                        success: function (result) {
                            if (result.Success) {

                                $.each(result.Data, function (i, n) {
                                    var option = "<option value='" + n.Id + "'>" + n.Name + "</option>";
                                    $("#LineId").append(option);
                                });
                                
                            }
                        },
                        error: function () {
                            $(this).showToastr('网络错误，请重新保存！');
                        }
                    });
                }
                $("#LineId").append("<option value='0'>-线路-</option>");
            });

            //权限提示
            if ($(this).getUrlQueryString("Authorize") == "noAuthorize") {
                $('#alert-demo-2').fadeToggle();
                setTimeout(function () {
                    $('#alert-demo-2').fadeToggle();
                }, 3000);
            }

            //高级搜索
            $("#panel0 #AdvancedSearch").click(function () {
                var ico = $(this).find(".fa");
                if (ico.hasClass('fa-angle-double-right'))
                    ico.removeClass("fa-angle-double-right").addClass("fa-angle-double-down");
                else
                    ico.removeClass("fa-angle-double-down").addClass("fa-angle-double-right");
                $("#panel0").find(".panel-body").toggleClass("hidden fadeIn");
            });

            //防止重复查询
            var queryNumber = 1;
            $("#btn_query").click(function () {
                if (queryNumber > 1) {
                    return false;
                }
                queryNumber = queryNumber + 1;
            });

            //导出
            $("#btn_export").click(function () {
                window.location.href = "/VisitStore/ExportBusinessUserVisitReached?businessUserId=" + $("#BusinessUserId").val() + "&lineId=" + $("#LineId") + "&startTime=" + $("#StartTime").val() + "&endTime=" + $("#EndTime").val();
            });

            var homePageHighLines = function () {
                var line3 = $('#high-line3');
                if (line3.length) {
                    var reportData = [];

                    $.ajax({
                        async: false,
                        type: "get",
                        url: "/Common/GetBussinessVisitStoreReport",
                        data: { businessUserId: $("#BusinessUserId").val(), start: $("#StartTime").val(), end: $("#EndTime").val() },
                        dataType: "json",
                        success: function (result) {
                            if (result.Success) {
                                reportData = $(this).jsonKeysToCase(result.Data);
                            }
                        },
                        error: function () {
                            $(this).showToastr('网络错误，请重新保存！');
                        }
                    });
                    var chart = {
                        type: 'column'
                    };
                    var title = {
                        text: ''
                    };
                    var subtitle = {
                        text: ''
                    };
                    var xAxis = {
                        type: 'category',
                        labels: {
                            rotation: -45  // 设置轴标签旋转角度
                        }
                    };
                    var yAxis = {
                        min: 0,
                        title: {
                            text: '',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    };
                    var tooltip = {
                        valueSuffix: ''
                    };
                    var plotOptions = {
                        bar: {
                            dataLabels: {
                                enabled: true
                            }
                        }
                    };
                    var legend = {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'top',
                        x: -40,
                        y: 100,
                        floating: true,
                        borderWidth: 1,
                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                        shadow: true
                    };
                    var credits = {
                        enabled: false
                    };
                    var datas = [];
                    reportData.forEach(function (item, index) {
                        var d = [];
                        d.push(item.bussinessusername);
                        d.push(item.data);
                        datas.push(d);
                    });
                    var series = [{
                        name: '拜访量',
                        data: datas,
                        dataLabels: {
                            enabled: true,
                            rotation: -90,
                            color: '#FFFFFF',
                            align: 'right',
                            format: '{point.y}', // :.1f 为保留 1 位小数
                            y: 10
                        }
                    }]
                    var json = {};
                    json.chart = chart;
                    json.title = title;
                    json.subtitle = subtitle;
                    json.tooltip = tooltip;
                    json.xAxis = xAxis;
                    json.yAxis = yAxis;
                    json.series = series;
                    json.plotOptions = plotOptions;
                    json.credits = credits;
                    $('#high-line3').highcharts(json);

                }

            }
            homePageHighLines();

        });
    </script>
}


